Chakra UIでブランドカラーを適用させる方法について調べてみた

こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。

Chakra UIは、UIコンポーネントライブラリの一つです。ドキュメントも丁寧で使いやすく、人気のあるUIライブラリになります。

最近、Chakra UIのスタイリングをカスタマイズする方法について調べたので、今回は独自のブランドカラーを設定する方法について、記述していきます。

themeの適用

プロジェクトで、Chakra UIのインストールをします。

$ yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

// または
$ npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

独自のブランドカラーを定義する際は、Chakra UIのextendThemeに指定します。カラーの指定の他に、コンポーネントのスタイルを上書きする際もextendTheme内で記述します。

/theme/index.tsを作成します。

const brand = {
  "50": "#fcfcfc",
  "100": "#11a8ff",
  "200": "#daf8a5",
  "300": "#baeC75",
  "400": "#99d950",
  "500": "#6dc11f",
  "600": "#54a516",
  "700": "#3e8a0f",
  "800": "#2b6f09",
  "900": "#1d5c05",
};

export const theme = extendTheme(
  {
    colors: {
      brand,
    },
  },
)

_app.tsxで、ChakraProviderにthemeを渡します。以下はNext.jsの_app.tsxに記述する例です。

import "../styles/globals.css";
import type { AppProps } from "next/app";
import { ChakraProvider } from "@chakra-ui/react";
import { theme } from "../theme/index";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

export default MyApp;

withDefaultColorScheme

コンポーネントのPropsに、デフォルトのカラースキーマが存在する場合

使用するコンポーネントのPropsにデフォルトのColorSchemeが存在する場合は、withDefaultColorSchemeを使用します。

withDefaultColorSchemeでは、使用するカラースキーマと、componentsに、適用させたいコンポーネントを配列の形で追記していきます。

export const theme = extendTheme(
  {
    colors: {
      brand,
    },
  withDefaultColorScheme({
    colorScheme: "brand",
    components: ["Button", "table"],
  })
);

コンポーネントのPropsに、デフォルトのカラースキーマが存在しない場合

デフォルトのカラースキーマが存在しない場合、extendTheme内でcomponents配下にスタイルを定義し、上書きしていきます。 通常、componentsはbaseStyle、size、variants、defaultPropsをキーとして持っています。

export const theme = extendTheme(
  {
    colors: {
      brand,
    },
    components: {
      Input: {
        variants: {
          outline: {
            field: {
              borderColor: 'brand.500',
              _focusVisible: {
                borderColor: 'brand.600',
              },
              _hover: { borderColor: 'brand.600' },
            },
            addon: {
              bg: 'brand.50',
            },
          },
        },
        defaultProps: {
          variant: 'outline',
        },
      },
    },
);

一つ目のフォームはホバー時の色になります。

createMultiStyleConfigHelpers

マルチコンポーネントのスタイリング

複数のコンポーネントを組み合わせるMenuやTabsコンポーネントなどを、階層毎に個別にスタイリングする場合は、Chakra UIのヘルパーを使用します。

const helpers = createMultiStyleConfigHelpers(['menu', 'item', 'list'])

const Menu = helpers.defineMultiStyleConfig({
  baseStyle: {
    menu: {
      colorScheme: 'brand',
      defaultProps: {
        colorScheme: 'brand',
      },
    },
    item: {
      _hover: {
        bg: 'brand.100',
        color: 'brand.500',
      },
    },
    list: {
      bg: 'brand.50',
    },
  },
  variants: {
    bold: {
      item: {
        fontWeight: 'bold',
      },
      menu: {
        boxShadow: 'xl',
      },
    },
  },
})

その後、定義した変数をextendThemeのcomponentsに指定します。

export const theme = extendTheme({
  colors: {
    brand,
  },
  components: {
    Menu,
  },
});

まとめ

今回は、Chakra UIでブランドテーマを適用する方法についてまとめました。Chakra UIのスタイリング方法は、他にも様々な方法があります。気になる方は調べてみてください。

ではまた。